<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>


<div id="dialog_dialog">
    <template>
        <el-dialog title="添加用户" :visible.sync="dialogDialogVisible">
            <el-form :label-position="labelPosition" :rules="form2Rules" class="demo-ruleForm" label-width="100px" :model="form2" ref="form2" @submit.native.prevent>
                <el-form-item label="First name:" prop="firstName">
                    <el-input v-model="form2.firstName" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="Last name:" prop="lastName">
                    <el-input v-model="form2.lastName" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="Age:" prop="age">
                    <el-input-number v-model="form2.age"></el-input-number>
                </el-form-item>
                <el-form-item label="Bio:" prop="bio">
                    <el-input v-model="form2.bio" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="Password:" prop="password">
                    <el-input v-model="form2.password" placeholder="" show-password clearable></el-input>
                </el-form-item>
                <el-form-item label="Telephone:" prop="telephone">
                    <el-input v-model="form2.telephone" placeholder="" clearable></el-input>
                </el-form-item>
                <el-form-item label="area:" prop="area">
                    <el-select v-model="form2.area" placeholder=""
                               multiple
                               filterable>
                        <el-option label="北京123" value="1"></el-option>
                        <el-option label="上海123" value="2"></el-option>
                        <el-option label="广州123" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="area2:" prop="area2">
                    <el-select v-model="form2.area2" placeholder=""
                               clearable
                               filterable>
                        <el-option label="北京" value="1"></el-option>
                        <el-option label="南京" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="特殊资源:" prop="resource">
                    <el-radio-group v-model="form2.resource">
                        <el-radio label="1">线上</el-radio>
                        <el-radio label="2">线下</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-checkbox-group v-model="form2.status">
                        <el-checkbox label="valid">有效</el-checkbox>
                        <el-checkbox label="invalid">无效</el-checkbox>
                        <el-checkbox label="test">测试</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="日期:" prop="date">
                    <el-date-picker v-model="form2.date" type="date" placeholder="请选择日期1">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="日期时间:" prop="datetime">
                    <el-date-picker v-model="form2.datetime" type="datetime" placeholder="请选择日期时间1">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="v_submitForm" >Submit</el-button>
                    <el-button  @click="v_resetForm" >reset</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="v_submitForm" >Submit</el-button>
                <el-button  @click="v_resetForm" >reset</el-button>
                <el-button  @click="v_cancelForm" >cancel</el-button>
            </div>
        </el-dialog>
    </template>
</div>

<script type="text/javascript">
    var dialogData = {
        data() {
            return {
                dialogDialogVisible: true,
                labelPosition: 'right',
                form2: {
                    submitStatus: "init"
                    ,
                    firstName:
                        "Chuck"
                    ,
                    lastName:
                        ""
                    ,
                    age:
                        ""
                    ,
                    bio:
                        ""
                    ,
                    password:
                        ""
                    ,
                    telephone:
                        ""
                    ,
                    area:
                        []

                    ,
                    area2:
                        ''

                    ,
                    resource:
                        ""
                    ,
                    status:
                        [
                            "test" ,
                            "valid"                 ]
                    ,
                    date:
                        ""
                    ,
                    datetime:
                        ""
                },
                form2Rules: {
                    firstName:
                        []
                    ,
                    lastName:
                        []
                    ,
                    age:
                        []
                    ,
                    bio:
                        []
                    ,
                    password:
                        []
                    ,
                    telephone:
                        [{
                            required: true, message: '请输入Telephone', trigger: 'blur'
                        }]
                    ,
                    area:
                        []
                    ,
                    area2:
                        []
                    ,
                    resource:
                        []
                    ,
                    status:
                        []
                    ,
                    date:
                        []
                    ,
                    datetime:
                        []
                }            };
        },
        methods: {
            submitForm_form2: function() {
                let vue = this;
                this.$refs["form2"].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: "",
                            type: 'POST',
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(vue.form2),
                            error: function() {
                                vue.$message.error('提交失败! 请稍后重试!');
                                vue.form2.submitStatus = "error";
                            },
                            success: function(ret) {
                                vue.$message({
                                    message: '处理成功!',
                                    type: 'success'
                                });

                                vue.form2.submitStatus = "success";
                            }

                        });
                    } else {
                        vue.$message.error('请检查必填参数!');
                vue.form2.submitStatus = "validateError";
                return false;
            }
            });
            },
            resetForm_form2: function() {
                this.$refs["form2"].resetFields();
            }
            ,
            v_submitForm: function() {
                this.submitForm_form2();
                if (this.form2.submitStatus == "error" || this.form2.submitStatus == "validateError") {
                    return;
                }
                submitForm(this);
            }
            ,
            v_resetForm: function() {
                this.resetForm_form2();
                resetForm(this);
            }

            ,
            v_submitForm: function() {
                this.submitForm_form2();
                if (this.form2.submitStatus == "error" || this.form2.submitStatus == "validateError") {
                    return;
                }

                submitForm(this);
            }
            ,
            v_resetForm: function() {
                this.resetForm_form2();

                resetForm(this);
            }
            ,
            v_cancelForm: function() {
                dialogDialogVisible = false;

                cancelForm(this);
            }
        }
    };

    var dialogForm = Vue.extend(dialogData);
    new dialogForm().$mount('#dialog_dialog');
</script>


</body>

<script>
function submitForm(data) {
    console.log("ERRRR");
    console.log(data);
}
</script>

</html>